<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
 <ul>
 <!-- 使用 v-for 修饰的 li 标签会重复生成 -->
    <!-- course 是循环元素（课程），index 是下标 -->
    <li v-for="(course,index) in courses" :key="index">
    {{index}} 、课程：{{course.name}}
   <ul>
 <!-- 嵌套循环，显示课程的章节信息 -->
 <li v-for="(chapter,idx) in course.chapters" :key="idx">
	 {{idx}} 、章节：{{chapter.name}} 课时：{{chapter.lesson}}
	   </li>
	   </ul>
		 13. </li>
	 </ul>
 </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
	   const app = new Vue({
	     el : "#app",
	        data : {
	          courses : [
	                  {
	             name : "前端框架入门" , chapters:[
	               {name :"Vue.js", lesson : 4 },
	                {name :"React.js", lesson : 8 },
	       {name :"Angular.js", lesson : 16 }
	 ]
	 },
	 {
	 name : "后端框架入门" , chapters:[
	 {name :"MyBatis", lesson : 8 },
		{name :"Spring", lesson : 8 },
	 {name :"SpringMVC", lesson : 16 }
		]
		 }
		 ]
		 }
		 });
		 </script>
	</body>
</html>
